<template>
	<view class="personalData">
		<main>
			<view>
				旧密码
				<input v-model="from.old_password" type="text" placeholder="请输入旧密码"
					placeholder-style="font-size: 13px;color: #666666;margin-left:20rpx;">
			</view>
			<view>
				新密码
				<input v-model="from.password" type="text"  placeholder="请输入设置密码"
					placeholder-style="font-size: 13px;color: #666666;margin-left:20rpx;">
			</view>
			<view>
				确认密码
				<input v-model="new_pass" type="text" placeholder="请输入确认密码"
					placeholder-style="font-size: 13px;color: #666666;margin-left:20rpx;">
			</view>
			<view>
				旧支付密码
				<input v-model="from.old_paypass" type="number" placeholder="请输入旧支付密码"
					placeholder-style="font-size: 13px;color: #666666;margin-left:20rpx;">
			</view>
			<view>
				新支付密码
				<input v-model="from.paypass" type="number"  placeholder="请输入新支付密码"
					placeholder-style="font-size: 13px;color: #666666;margin-left:20rpx;">
			</view>
		</main>
		<button @click="setPassword">确定</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				from: {
					old_password: "",
					password: "",
					old_paypass:"",
					paypass:""
				},
				new_pass: ''
			};
		},
		onLoad() {
			// this.getUserInfo()
		},
		methods: {
			setPassword() {
				if (this.from.password !== this.new_pass) {
					uni.showToast({
						title: '确认密码不一致',
						icon:"none"
					});
					return
				}
				this.$http.post(this.$api.updateInfo, this.from, {
					token: true
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '修改成功',
							icon: "success"
						});
						setTimeout(function(){
							uni.switchTab({
								url: '/pages/mine/mine'
							})
						},500)
					}else{
						uni.showToast({
							title: res.msg,
						});
					}
					
				})
			}
		}
	}
</script>

<style lang="scss">
	.personalData {
		overflow: hidden;
		.real-title {
			font-size: 26rpx;
			color: #E83434;
			margin: 0rpx 30rpx 30rpx 30rpx;
		}

		&>button {
			width: 690rpx;
			height: 88rpx;
			color: #333333;
			letter-spacing: 2px;
			background: #FFF0CA;
			font-size: 15px;
			border-radius: 44rpx;
			line-height: 88rpx;
			margin-top: 178rpx;
		}

		&>main {
			width: 690rpx;
			padding: 0 20rpx;
			background: #FFF0CA;
			border-radius: 20rpx;
			margin: 100rpx auto;
			box-sizing: border-box;

			&>view {
				padding: 20rpx;
				width: 100%;
				box-sizing: border-box;
				border-bottom: 1px solid #F3E2B8;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 13px;

				&>input {
					flex: 1;
					height: 100%;
					text-align: right;
					padding-right: 20rpx;
				}

				&>p {
					display: flex;

					&>b {
						font-size: 15px;
						margin-right: 24rpx;
					}

					&>span {
						width: 80rpx;
						height: 80rpx;
						border-radius: 12px;
						margin-right: 28rpx;
						background: #CDCDCD;
						display: flex;
						align-items: center;
						justify-content: center;

						&>image {
							width: 36rpx;
							height: 34rpx;
						}
					}

					&>img {
						width: 80rpx;
						height: 80rpx;
						border-radius: 12px;
						margin-right: 28rpx;
					}
				}
			}
		}
	}
</style>